<template>
  <div class="liquidity-card">
    <div class="liquidity-card__head">
      <span>You Liquidity</span>
      <i class="iconfont icon-help"></i>
    </div>
    <div class="liquidity-card__loading" v-if="loading">
      <div class="icon">
        <svg
          version="1.1"
          id="L3"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          viewBox="0 0 100 100"
          enable-background="new 0 0 0 0"
          xml:space="preserve"
        >
          <circle
            fill="none"
            stroke="var(--color-des)"
            stroke-width="3"
            cx="50"
            cy="50"
            r="44"
            style="opacity: 0.5"
          ></circle>
          <circle
            fill="var(--color)"
            stroke="var(--card)"
            stroke-width="3"
            cx="7"
            cy="55"
            r="6"
          >
            <animateTransform
              attributeName="transform"
              dur="1.5s"
              type="rotate"
              from="0 50 48"
              to="360 50 52"
              repeatCount="indefinite"
            ></animateTransform>
          </circle>
        </svg>
      </div>
    </div>
    <div class="liquidity-card__list" v-else-if="list.length > 0">
      <LiquidityCardItem v-for="(item, i) in list" :key="i" :pair="item" />
    </div>
    <div class="liquidity-card__empty" v-else>
      <span>No Liquidity found.</span>
    </div>
  </div>
</template>

<script>
import ButtonBase from "@/components/common/ButtonBase";
import LiquidityCardItem from "@/components/LiquidityCardItem";

import { mapState } from "vuex";
import { getPairInfo } from "@/init";
import { getTokenBySymbol } from "@/utils/token";

export default {
  components: {
    ButtonBase,
    LiquidityCardItem,
  },
  data() {
    return {
      loading: false,
      list: [],
    };
  },
  computed: {
    ...mapState({
      account: (state) => state.account,
    }),
  },
  watch: {
    account() {
      this.load();
    },
  },
  mounted() {
    this.load();
  },
  methods: {
    async load() {
      if (!this.account) return;
      this.loading = true;
      const _pairCache = window.localStorage.getItem("pair_cache");
      const pairCache = (_pairCache && JSON.parse(_pairCache)) || {};
      const tmp = [];
      for (var key in pairCache) {
        const { tokenA, tokenB } = pairCache[key];
        const token0 = getTokenBySymbol(tokenA);
        const token1 = getTokenBySymbol(tokenB);
        const pair = await getPairInfo(token0, token1);
        console.log("pair", pair);
        const { userLiquidity } = pair || {};
        if (+userLiquidity > 0) {
          pair.fold = false;
          tmp.push(pair);
        }
      }
      this.loading = false;
      this.list = tmp;
    },
  },
};
</script>

<style lang="scss" scoped>
.liquidity-card {
  &__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 30px 0 15px;

    span {
      font-size: 14px;
      font-family: "Roboto Medium";
      color: var(--color);
    }

    i {
      font-size: 20px;
      color: var(--color-content);
    }
  }

  &__loading {
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    .icon {
      svg {
        width: 50px;
      }
    }
  }

  &__list,
  &__empty {
    border: 1px solid var(--border-color);
    padding: 20px;
    border-radius: 10px;
  }

  &__empty {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.03);

    span {
      font-size: 14px;
      font-family: "Roboto Medium";
      color: var(--color-content);
    }
  }
}
</style>
